<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交平台多级顶部导航</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #3B82F6;
      --secondary: #10B981;
      --danger: #EF4444;
      --light: #F9FAFB;
      --dark: #1F2937;
      --light-gray: #E5E7EB;
      --dark-gray: #6B7280;
      --white: #FFFFFF;
      --border-light: #E5E7EB;
      --border-dark: #374151;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--light);
      color: var(--dark);
      height: 100vh;
      overflow-x: hidden;
      margin: 0;
    }
    
    /* 页面容器 */
    .page-container {
      display: none;
      height: 100%;
    }
    
    .page-container.active {
      display: block;
    }
    
    /* 页面内容 */
    .page-content {
      padding: 20px;
      min-height: calc(100vh - 112px); /* 减去两级导航高度 */
      padding-top: 112px;
    }
    
    .page-title {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .page-title {
      color: var(--white);
      border-bottom-color: var(--border-dark);
    }
    
    .style-description {
      background-color: rgba(59, 130, 246, 0.1);
      border-left: 4px solid var(--primary);
      padding: 12px 16px;
      margin-bottom: 20px;
      border-radius: 0 4px 4px 0;
    }
    
    .dark .style-description {
      background-color: rgba(59, 130, 246, 0.2);
      color: var(--white);
    }
    
    /* 一级导航样式 */
    .level-1-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 56px;
      display: flex;
      align-items: center;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
      z-index: 1000;
      padding: 0 16px;
    }
    
    .dark .level-1-nav {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    .nav-brand {
      font-size: 20px;
      font-weight: 600;
      color: var(--primary);
      text-decoration: none;
    }
    
    .level-1-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .dark .level-1-title {
      color: var(--white);
    }
    
    .level-1-actions {
      display: flex;
      gap: 12px;
    }
    
    .level-1-action {
      color: var(--dark-gray);
      background: none;
      border: none;
      font-size: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    
    .dark .level-1-action {
      color: #9CA3AF;
    }
    
    .level-1-action:hover {
      background-color: var(--light-gray);
    }
    
    .dark .level-1-action:hover {
      background-color: #374151;
    }
    
    /* 二级导航样式 */
    .level-2-nav {
      position: fixed;
      top: 56px;
      left: 0;
      right: 0;
      height: 56px;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
      z-index: 999;
    }
    
    .dark .level-2-nav {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
    }
    
    /* 样式1: 横向标签二级导航 */
    .style-tabs .level-2-nav {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 0 8px;
    }
    
    .style-tabs .level-2-nav::-webkit-scrollbar {
      display: none;
    }
    
    .style-tabs .level-2-item {
      padding: 0 16px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 500;
      color: var(--dark-gray);
      white-space: nowrap;
      border-bottom: 3px solid transparent;
      cursor: pointer;
    }
    
    .dark .style-tabs .level-2-item {
      color: #9CA3AF;
    }
    
    .style-tabs .level-2-item.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }
    
    /* 样式2: 图标文字二级导航 */
    .style-icons .level-2-nav {
      display: flex;
    }
    
    .style-icons .level-2-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--dark-gray);
      font-size: 11px;
      padding-top: 6px;
      cursor: pointer;
    }
    
    .dark .style-icons .level-2-item {
      color: #9CA3AF;
    }
    
    .style-icons .level-2-item.active {
      color: var(--primary);
    }
    
    .style-icons .level-2-icon {
      font-size: 20px;
      margin-bottom: 4px;
    }
    
    /* 样式3: 下拉菜单二级导航 */
    .style-dropdown .level-2-nav {
      padding: 0 16px;
    }
    
    .style-dropdown .level-2-selector {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--dark);
      background: none;
      border: none;
      font-size: 16px;
      font-weight: 500;
    }
    
    .dark .style-dropdown .level-2-selector {
      color: var(--white);
    }
    
    .style-dropdown .level-2-menu {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: var(--white);
      border-bottom: 1px solid var(--border-light);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      display: none;
    }
    
    .dark .style-dropdown .level-2-menu {
      background-color: #111827;
      border-bottom-color: var(--border-dark);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }
    
    .style-dropdown .level-2-menu.show {
      display: block;
    }
    
    .style-dropdown .level-2-item {
      padding: 12px 16px;
      font-size: 15px;
      color: var(--dark);
      border-bottom: 1px solid var(--border-light);
      cursor: pointer;
    }
    
    .dark .style-dropdown .level-2-item {
      color: var(--white);
      border-bottom-color: var(--border-dark);
    }
    
    .style-dropdown .level-2-item:last-child {
      border-bottom: none;
    }
    
    .style-dropdown .level-2-item.active {
      color: var(--primary);
      background-color: rgba(59, 130, 246, 0.1);
    }
    
    .dark .style-dropdown .level-2-item.active {
      background-color: rgba(59, 130, 246, 0.2);
    }
    
    /* 样式4: 分段按钮二级导航 */
    .style-segmented .level-2-nav {
      padding: 8px 16px;
    }
    
    .segmented-control {
      display: flex;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--border-light);
      width: 100%;
    }
    
    .dark .segmented-control {
      border-color: var(--border-dark);
    }
    
    .style-segmented .level-2-item {
      flex: 1;
      padding: 8px 0;
      text-align: center;
      font-size: 15px;
      font-weight: 500;
      color: var(--dark-gray);
      background: none;
      border: none;
      cursor: pointer;
    }
    
    .dark .style-segmented .level-2-item {
      color: #9CA3AF;
    }
    
    .style-segmented .level-2-item.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 深色模式 */
    .dark {
      background-color: var(--dark);
      color: var(--white);
    }
    
    /* 通知徽章 */
    .badge {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background-color: var(--danger);
      color: white;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 120px;
      right: 16px;
      z-index: 1001;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .dark .style-switcher {
      background-color: #1F2937;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }
    
    .switcher-header {
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 500;
      border-bottom: 1px solid var(--border-light);
    }
    
    .dark .switcher-header {
      border-bottom-color: var(--border-dark);
      color: var(--white);
    }
    
    .style-option {
      padding: 10px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .style-option:hover {
      background-color: var(--light);
    }
    
    .dark .style-option {
      color: var(--white);
    }
    
    .dark .style-option:hover {
      background-color: #374151;
    }
    
    .style-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 动画效果 */
    @keyframes slideDown {
      from { transform: translateY(-10px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    
    .style-dropdown .level-2-menu.show {
      animation: slideDown 0.2s ease forwards;
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">二级导航样式</div>
    <div class="style-option active" data-style="tabs">横向标签</div>
    <div class="style-option" data-style="icons">图标文字</div>
    <div class="style-option" data-style="dropdown">下拉菜单</div>
    <div class="style-option" data-style="segmented">分段按钮</div>
    <div class="style-option" data-style="dark">深色模式</div>
  </div>
  
  <!-- 1. 横向标签二级导航页面 -->
  <div class="page-container active style-tabs" id="tabsPage">
    <!-- 一级导航 -->
    <nav class="level-1-nav">
      <a href="#" class="nav-brand">Social</a>
      <div class="level-1-actions">
        <button class="level-1-action" aria-label="搜索">
          <i class="fa fa-search"></i>
        </button>
        <button class="level-1-action" aria-label="消息">
          <i class="fa fa-bell"></i>
          <span class="badge">3</span>
        </button>
      </div>
    </nav>
    
    <!-- 二级导航 - 横向标签 -->
    <nav class="level-2-nav">
      <div class="level-2-item active" data-category="following">关注</div>
      <div class="level-2-item" data-category="recommended">推荐</div>
      <div class="level-2-item" data-category="trending">热门</div>
      <div class="level-2-item" data-category="latest">最新</div>
      <div class="level-2-item" data-category="nearby">附近</div>
      <div class="level-2-item" data-category="topics">话题</div>
      <div class="level-2-item" data-category="groups">群组</div>
    </nav>
    
    <div class="page-content">
      <h1 class="page-title">关注内容</h1>
      <div class="style-description">
        <strong>样式特点：</strong> 一级导航展示品牌和核心功能，二级导航采用可横向滑动的标签形式，适合分类较多的内容浏览场景。标签支持左右滑动，选中项有下划线指示。
      </div>
      <p>这里显示您关注的人发布的最新动态和内容</p>
    </div>
  </div>
  
  <!-- 2. 图标文字二级导航页面 -->
  <div class="page-container style-icons" id="iconsPage">
    <!-- 一级导航 -->
    <nav class="level-1-nav">
      <button class="level-1-action" aria-label="返回">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="level-1-title">探索</h1>
      <button class="level-1-action" aria-label="设置">
        <i class="fa fa-cog"></i>
      </button>
    </nav>
    
    <!-- 二级导航 - 图标文字 -->
    <nav class="level-2-nav">
      <div class="level-2-item active" data-category="discover">
        <i class="fa fa-compass level-2-icon"></i>
        <span>发现</span>
      </div>
      <div class="level-2-item" data-category="events">
        <i class="fa fa-calendar level-2-icon"></i>
        <span>活动</span>
      </div>
      <div class="level-2-item" data-category="topics">
        <i class="fa fa-hashtag level-2-icon"></i>
        <span>话题</span>
      </div>
      <div class="level-2-item" data-category="people">
        <i class="fa fa-users level-2-icon"></i>
        <span>达人</span>
      </div>
    </nav>
    
    <div class="page-content">
      <h1 class="page-title">发现</h1>
      <div class="style-description">
        <strong>样式特点：</strong> 一级导航提供返回和设置功能，二级导航采用图标+文字组合形式，视觉识别性强，适合功能入口类页面。每个选项平均分配宽度，点击有明确的状态变化。
      </div>
      <p>这里展示为您推荐的热门内容和新兴趋势</p>
    </div>
  </div>
  
  <!-- 3. 下拉菜单二级导航页面 -->
  <div class="page-container style-dropdown" id="dropdownPage">
    <!-- 一级导航 -->
    <nav class="level-1-nav">
      <button class="level-1-action" aria-label="返回">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="level-1-title">消息</h1>
      <button class="level-1-action" aria-label="新消息">
        <i class="fa fa-plus"></i>
      </button>
    </nav>
    
    <!-- 二级导航 - 下拉菜单 -->
    <nav class="level-2-nav">
      <button class="level-2-selector" id="dropdownToggle">
        <span id="selectedDropdown">全部消息</span>
        <i class="fa fa-chevron-down"></i>
      </button>
      <div class="level-2-menu" id="dropdownMenu">
        <div class="level-2-item active" data-category="all">全部消息</div>
        <div class="level-2-item" data-category="mentions">@我的</div>
        <div class="level-2-item" data-category="comments">评论</div>
        <div class="level-2-item" data-category="likes">点赞</div>
        <div class="level-2-item" data-category="follows">关注</div>
      </div>
    </nav>
    
    <div class="page-content">
      <h1 class="page-title">全部消息</h1>
      <div class="style-description">
        <strong>样式特点：</strong> 一级导航提供消息相关功能，二级导航采用下拉菜单形式，节省屏幕空间，适合分类选项较多但不常用的场景。点击触发下拉动画，选中项会更新显示。
      </div>
      <p>这里显示您收到的所有类型消息通知</p>
    </div>
  </div>
  
  <!-- 4. 分段按钮二级导航页面 -->
  <div class="page-container style-segmented" id="segmentedPage">
    <!-- 一级导航 -->
    <nav class="level-1-nav">
      <button class="level-1-action" aria-label="返回">
        <i class="fa fa-arrow-left"></i>
      </button>
      <h1 class="level-1-title">个人中心</h1>
      <button class="level-1-action" aria-label="更多">
        <i class="fa fa-ellipsis-v"></i>
      </button>
    </nav>
    
    <!-- 二级导航 - 分段按钮 -->
    <nav class="level-2-nav">
      <div class="segmented-control">
        <button class="level-2-item active" data-category="posts">帖子</button>
        <button class="level-2-item" data-category="comments">评论</button>
        <button class="level-2-item" data-category="likes">点赞</button>
        <button class="level-2-item" data-category="collections">收藏</button>
      </div>
    </nav>
    
    <div class="page-content">
      <h1 class="page-title">我的帖子</h1>
      <div class="style-description">
        <strong>样式特点：</strong> 一级导航为个人中心相关功能，二级导航采用分段按钮形式，选项间有明确的视觉分隔，适合分类较少且平级的内容切换。选中项有明显的背景色区分。
      </div>
      <p>这里显示您发布过的所有帖子内容</p>
    </div>
  </div>
  
  <!-- 5. 深色模式导航页面 -->
  <div class="page-container style-tabs dark" id="darkPage">
    <!-- 一级导航 -->
    <nav class="level-1-nav">
      <a href="#" class="nav-brand">Social</a>
      <div class="level-1-actions">
        <button class="level-1-action" aria-label="搜索">
          <i class="fa fa-search"></i>
        </button>
        <button class="level-1-action" aria-label="消息">
          <i class="fa fa-bell"></i>
          <span class="badge">3</span>
        </button>
      </div>
    </nav>
    
    <!-- 二级导航 - 横向标签 -->
    <nav class="level-2-nav">
      <div class="level-2-item active" data-category="following">关注</div>
      <div class="level-2-item" data-category="recommended">推荐</div>
      <div class="level-2-item" data-category="trending">热门</div>
      <div class="level-2-item" data-category="latest">最新</div>
      <div class="level-2-item" data-category="nearby">附近</div>
      <div class="level-2-item" data-category="topics">话题</div>
      <div class="level-2-item" data-category="groups">群组</div>
    </nav>
    
    <div class="page-content">
      <h1 class="page-title">关注内容</h1>
      <div class="style-description">
        <strong>样式特点：</strong> 深色模式下的多级导航，一级导航展示品牌和核心功能，二级导航采用横向标签形式。深色背景降低视觉疲劳，适合夜间使用。
      </div>
      <p>这里显示您关注的人发布的最新动态和内容</p>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取DOM元素
    const styleOptions = document.querySelectorAll('.style-option');
    const pageContainers = document.querySelectorAll('.page-container');
    const level1Actions = document.querySelectorAll('.level-1-action');
    const dropdownToggle = document.getElementById('dropdownToggle');
    const dropdownMenu = document.getElementById('dropdownMenu');
    const selectedDropdown = document.getElementById('selectedDropdown');
    
    // 当前激活的样式
    let currentStyle = 'tabs';
    
    // 切换导航样式
    styleOptions.forEach(option => {
      option.addEventListener('click', function() {
        // 更新样式选项的活跃状态
        styleOptions.forEach(opt => opt.classList.remove('active'));
        this.classList.add('active');
        
        // 获取选中的样式
        currentStyle = this.getAttribute('data-style');
        
        // 隐藏所有页面
        pageContainers.forEach(page => page.classList.remove('active'));
        
        // 显示对应样式的页面
        const stylePage = document.getElementById(`${currentStyle}Page`);
        if (stylePage) {
          stylePage.classList.add('active');
          
          // 重置该页面的二级导航选中状态
          const level2Items = stylePage.querySelectorAll('.level-2-item');
          level2Items.forEach(item => item.classList.remove('active'));
          if (level2Items.length > 0) {
            level2Items[0].classList.add('active');
          }
          
          // 更新下拉菜单选中项
          if (currentStyle === 'dropdown' && selectedDropdown) {
            selectedDropdown.textContent = '全部消息';
          }
          
          // 更新页面内容标题
          updatePageTitle(stylePage, level2Items[0]);
        }
      });
    });
    
    // 二级导航项点击事件委托
    document.addEventListener('click', function(e) {
      const level2Item = e.target.closest('.level-2-item');
      if (level2Item) {
        e.preventDefault();
        
        // 获取当前活跃的页面
        const activePage = document.querySelector('.page-container.active');
        if (!activePage) return;
        
        // 移除所有二级导航项的活跃状态
        const level2Items = activePage.querySelectorAll('.level-2-item');
        level2Items.forEach(item => item.classList.remove('active'));
        
        // 添加当前导航项的活跃状态
        level2Item.classList.add('active');
        
        // 如果是下拉菜单样式，点击后关闭菜单并更新显示
        if (activePage.classList.contains('style-dropdown')) {
          dropdownMenu.classList.remove('show');
          if (selectedDropdown) {
            selectedDropdown.textContent = level2Item.textContent;
          }
        }
        
        // 更新页面内容标题
        updatePageTitle(activePage, level2Item);
      }
    });
    
    // 下拉菜单切换
    if (dropdownToggle && dropdownMenu) {
      dropdownToggle.addEventListener('click', function(e) {
        e.stopPropagation();
        dropdownMenu.classList.toggle('show');
      });
    }
    
    // 点击页面其他地方关闭下拉菜单
    document.addEventListener('click', function() {
      if (dropdownMenu && dropdownMenu.classList.contains('show')) {
        dropdownMenu.classList.remove('show');
      }
    });
    
    // 一级导航操作按钮点击事件
    level1Actions.forEach(action => {
      action.addEventListener('click', function() {
        let actionName = '';
        const icon = this.querySelector('i');
        
        if (icon.classList.contains('fa-search')) actionName = '搜索';
        else if (icon.classList.contains('fa-bell')) actionName = '消息通知';
        else if (icon.classList.contains('fa-arrow-left')) actionName = '返回';
        else if (icon.classList.contains('fa-cog')) actionName = '设置';
        else if (icon.classList.contains('fa-plus')) actionName = '新建消息';
        else if (icon.classList.contains('fa-ellipsis-v')) actionName = '更多选项';
        
        alert(`执行${actionName}操作`);
      });
    });
    
    // 更新页面标题
    function updatePageTitle(pageContainer, level2Item) {
      const category = level2Item.getAttribute('data-category');
      const pageTitleElement = pageContainer.querySelector('.page-title');
      
      if (pageTitleElement && category) {
        // 标题映射关系
        const titleMap = {
          'following': '关注内容',
          'recommended': '推荐内容',
          'trending': '热门内容',
          'latest': '最新内容',
          'nearby': '附近内容',
          'topics': '话题内容',
          'groups': '群组内容',
          'discover': '发现',
          'events': '活动',
          'people': '达人',
          'all': '全部消息',
          'mentions': '@我的消息',
          'comments': '评论消息',
          'likes': '点赞消息',
          'follows': '关注消息',
          'posts': '我的帖子',
          'comments': '我的评论',
          'likes': '我的点赞',
          'collections': '我的收藏'
        };
        
        pageTitleElement.textContent = titleMap[category] || '内容页面';
      }
    }
  </script>
</body>
</html>
